<template>
  <el-container class="home-sjml" v-loading="loading">
    <el-header class="header search-header">
      <el-form
        ref="ruleFormRef"
        class="between-form"
        :model="search"
        :inline="true"
      >
        <div>
          <el-form-item label="库类型" prop="belongModule">
            <el-select
              v-model="search.belongModule"
              placeholder="请选择"
              style="min-width: 120px"
              clearable
            >
              <el-option key="" label="全部" value="" />
              <el-option
                v-for="item in typeObject.klx"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="数据表/表英文名称" prop="objectNameOrChn">
            <el-input
              v-model="search.objectNameOrChn"
              placeholder="请输入数据表/表英文名称"
              clearable
            />
          </el-form-item>

          <el-form-item label="责任科室" prop="belongOrgId">
            <el-select
              v-model="search.belongOrgId"
              placeholder="请选择"
              style="min-width: 120px"
              clearable
            >
              <el-option key="" label="全部" value="" />
              <el-option
                v-for="item in typeObject.zrks"
                :key="item.orgId"
                :label="item.orgName"
                :value="item.orgId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="业务分类" prop="busiTypeCode">
            <el-select
              v-model="search.busiTypeCode"
              placeholder="请选择"
              style="min-width: 120px"
              clearable
            >
              <el-option key="" label="全部" value="" />
              <el-option
                v-for="item in typeObject.ywfl"
                :key="item.busiTypeCode"
                :label="item.busiTypeName"
                :value="item.busiTypeCode"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="存储库" prop="belongModule">
            <el-select
              v-model="search.belongModule"
              placeholder="请选择"
              style="min-width: 120px"
              clearable
            >
              <el-option key="" label="全部" value="" />
              <el-option
                v-for="item in typeObject.cck"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item style="margin-right: 0">
          <el-button
            type="primary"
            class="search-btn"
            @click="getSearch(ruleFormRef)"
          >
            查询
          </el-button>
          <el-button @click="reset(ruleFormRef)" class="reset-btn"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-header>
    <el-header class="header">
      <div class="header-l">
        <el-icon color="#2263BF"><Operation /></el-icon>
        <span class="text">数据目录列表</span>
      </div>
    </el-header>
    <el-main>
      <el-container>
        <el-main>
          <el-container>
            <el-main class="container bc-table">
              <el-table
                :data="dataInfo.tableData"
                style="width: 100%; height: 100%"
              >
                <el-table-column prop="objectNameChn" label="数据表名称" />
                <el-table-column prop="objectName" label="表英文名称" />
                <el-table-column prop="dbType" label="存储库" />
                <el-table-column prop="storageSpace" label="存储空间">
                </el-table-column>
                <el-table-column prop="dataAmount" label="数据条数" />
                <el-table-column prop="belongOrgName" label="责任科室" />
                <el-table-column prop="busiTypeNames" label="业务分类">
                  <template #default="scope">
                    <span>{{ scope.row.busiTypeNames.join(',') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="catalogName" label="所属目录" />
                 <el-table-column prop="lastModify" label="更新时间">
                  <template #default="scope">
                    <span>{{ formatDateTime(scope.row.lastModify) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                  <template #default="scope">
                    <span>{{ formatDateTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="gotodetail(scope.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer class="footer mt20">
              <el-pagination
                v-model:current-page="tableField.pageNo"
                v-model:page-size="tableField.pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                layout="sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
              />
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script setup>
import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { paramkvlist, repolist, getTypeList, busioptions } from "@/api";
import { getsjmlList } from "@/api/sjml";
import { Minxfun } from "@/utils/minxin";
const { handleSizeChange, handleCurrentChange, tableField, total,loading,formatDateTime } = Minxfun();

const router = useRouter();

watch(tableField, (newvla, oldval) => {
  getTableData();
});

onMounted(() => {
  getType();
  getTableData();
});

// 获取字典
let typeObject = reactive({
  klx: [],
  cck: [],
  zrks: [],
  ywfl: [],
});
const getType = async () => {
  try {
    // 库类型
    let res = await paramkvlist({
      "paramType":"belong_module"
    });
    typeObject.klx = res.data;
     let res2 = await getTypeList({
      orgTypeCode: "office",
    });
    typeObject.zrks = res2.data;
    let res3 = await busioptions();
    typeObject.ywfl = res3.data;
    // 存储库
    // let res1 = await repolist();
    // typeObject.cck = res1.data;

   
  } catch (e) {
    console.error(e);
  }
};

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

const reset = (ruleFormRef) => {
  ruleFormRef.resetFields();
  getTableData();
};

const ruleFormRef = ref();
const search = reactive({
  objectId: "",
  objectNameOrChn: "",
  belongOrgId: "",
  busiTypeCode: "",
  belongModule: "",
});
let dataInfo = reactive({
  tableData: [],
});
// 获取列表
const getTableData = async() => {
  try {
    loading.value = true;
    let {data} = await getsjmlList({
      ...search,
      ...tableField.value,
      pageNum: tableField.value.pageNo
    });
    dataInfo.tableData = data.objectList
    total.value = Number(data.total) || 0;
    loading.value = false;
  } catch (e) {
     loading.value = false;
    console.error(e);
  }
};

let currentRow = ref(null);

const gotodetail = (row) => {
  // router.push({
  //   name: "sjmlxq",
  //   query: {
  //     row: JSON.stringify(row),
  //   },
  // });
  piniaTab.add({
    path: "/sjmlxq",
    component: () => import("@/pages/sjwhzx/sjml/sjmlxq.vue"),
    name: "数据目录详情",
    icon: "",
    query: {
      // row: JSON.stringify(row),
      id: row.id,
      // name: row.tableNameChn,
      // nameEn: row.tableName
    },
    meta: {
      title: "数据目录详情",
      icon: "dashboard",
    },
  });
};

const handleClick = (value) => {
  currentRow.value = value.id;
  showClint.value = true;
};
</script>

<style lang="scss" scoped>
.home-sjml {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
